/*
 * @Author: your name
 * @Date: 2020-11-05 11:19:34
 * @LastEditTime: 2020-11-12 13:41:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /crowd-funding/src/components/pages/component/store/index.js
 */
import React, { PureComponent } from 'react'
import Tile from './Tile/index' // 故事页 头图透图
import Waterfall from './Waterfall/index' // 故事页 多图平铺
import ImgAndText from './ImgAndText/index' // 故事页 图文动效
import './index.scss'
import { connect } from 'react-redux'
import { get } from 'lodash'
import Exposure from '../../../common/Exposure'

class Store extends PureComponent {
	render() {
		const { homeData } = this.props
		const { storyPageData = {} } = homeData
		const projectAdvertChildInfoVos = get(storyPageData, 'projectStoryNewDto.storyDto', [])

		const advList = projectAdvertChildInfoVos.filter(
			(item) => item.type === '10004' || item.type === '10005' || item.type === '10006'
		)

		return (
			<div className="storeIndex">
				<Exposure floorName="story" />
				<div className="storeTitle">众筹故事</div>
				{advList.map((item, index) => {
					const key = `${item.type}-${index}`
					if (item.type === '10004') {
						let isHaveBorderRadius = false
						if (index === 0) {
							isHaveBorderRadius = true
						}
						// 故事页 头图透图
						return (
							<Tile item={item} isHaveBorderRadius={isHaveBorderRadius} key={key} />
						)
					}
					if (item.type === '10005') {
						// 故事页 图文动效
						return <ImgAndText item={item} key={key} />
					}
					if (item.type === '10006') {
						// 故事页 多图平铺
						return <Waterfall item={item} key={key} />
					}
					return null
				})}
			</div>
		)
	}
}

export default connect(({ homeData }) => ({ homeData }))(Store)
